<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
<!-- usar um select em responsavel e status;usar valdiadores -->

<ui:composition template="/css/template.xhtml">

	<ui:define name="main">

		<rich:modalPanel id="alterarConta">
			<f:facet name="header">
				<h:outputText value="Alterar Conta" />
			</f:facet>
			<a4j:outputPanel ajaxRendered="true">
				<a4j:form id="formAlt">
					<h:panelGrid columns="2">
						<h:outputText value="Titulo" />
						<h:inputText value="#{contaBean.conta.nome}" />
						<h:outputText value="Valor" />
						<h:inputText value="#{contaBean.conta.valor}" />
						<h:outputText value="Data" />
						<rich:calendar value="#{contaBean.conta.dataVencimento}"
							required="true" datePattern="dd/MM/yyyy"/>
					
						<h:commandButton action="#{contaBean.atualizarContas}"
							value="Atualizar" id="Atualizar">
							<rich:componentControl for="alterarConta" attachTo="Atualizar"
								operation="hide" event="onclick" />
						</h:commandButton>
						<h:commandButton action="#{contaBean.atualizaVisao}"
							value="cancelar" id="cancelar" immediate="true">
							<rich:componentControl for="alterarConta" attachTo="cancelar"
								operation="hide" event="onclick" />
						</h:commandButton>
					</h:panelGrid>
				</a4j:form>
			</a4j:outputPanel>
		</rich:modalPanel>
		<rich:panel style="text-align:center;margin:auto;width:70%;">
			<f:facet name="header">Cadastro de Contas</f:facet>
			<h:messages />
			<h:form>
				<h:panelGrid columns="2" cellspacing="1px"
					style="text-align:center; margin:auto;">
					<h:panelGrid columns="2">
						<h:outputText value="Titulo da Conta:" />
						<h:inputText value="#{contaBean.conta.nome}" required="true"
							id="titulo" />

						<h:outputText value="Valor" />
						<h:inputText value="#{contaBean.conta.valor}" required="true"
							id="valor">
							<f:convertNumber maxFractionDigits="2" />
						</h:inputText>
						<h:outputText value="Data" />
						<rich:calendar value="#{contaBean.conta.dataVencimento}"
							required="true" datePattern="dd/MM/yyyy"/>

					</h:panelGrid>
				</h:panelGrid>
				<a4j:commandButton value="cadastrar"
					action="#{contaBean.cadastrarConta}" reRender="tabContas" />
			</h:form>
		</rich:panel>


		<rich:panel style="text-align:center;margin:auto;width:70%;">
			<f:facet name="header">Listagem de Contas</f:facet>
			<h:form>
				<rich:dataTable id="tabContas" value="#{contaBean.listaContasByLogado}"
					var="c" style="text-align:center;margin:auto" rows="10" >
					<f:facet name="header" >
						<rich:columnGroup>
							<rich:column colspan="7">
								<h:outputText value="Contas" />
							</rich:column>
							<rich:column breakBefore="true">
								<h:outputText value="titulo" />
							</rich:column>
							<rich:column>
								<h:outputText value="valor" />
							</rich:column>
							<rich:column>
								<h:outputText value="data de Vencimento" />
							</rich:column>
							<rich:column>
								<h:outputText value="status" />
							</rich:column>
							<rich:column >
								<h:outputText value="atualizar" />
							</rich:column>
							<rich:column>
								<h:outputText value="excluir" />
							</rich:column>
							<rich:column>
								<h:outputText value="pagar" />
							</rich:column>
						</rich:columnGroup>
					</f:facet>
					<rich:column sortBy="#{c.nome}" filterBy="#{c.nome}" filterEvent="onkeyup"
						styleClass="rich-filter-input">
						<h:outputText value="#{c.nome}" />
					</rich:column>
					<rich:column sortBy="#{c.valor}" filterBy="#{c.valor}" filterEvent="onkeyup">
						<h:outputText value="#{c.valor}" />
					</rich:column>
					<rich:column sortBy="#{c.dataVencimento}" filterBy="#{c.dataVencimento}" filterEvent="onkeyup">
						<h:outputText value="#{c.dataVencimento}">
							<f:convertDateTime pattern="dd/MM/yyyy" />

						</h:outputText>
					</rich:column>
					<rich:column sortBy="#{c.status}" filterBy="#{c.status}" filterEvent="onkeyup" >
						<h:outputText value="#{c.status==true?'pago':'nao pago'}" />
					</rich:column>
					<rich:column>
						<a4j:commandButton value="alterar" id="alterar" ajaxSingle="true"
							actionListener="#{contaBean.atualizarAllContaActionListener}"
							oncomplete="#{rich:component('alterarConta')}.show()"
							disabled="#{c.status}">
							<f:attribute name="contaRow" value="#{c}" />
						</a4j:commandButton>
					</rich:column>
					<rich:column>
						<a4j:commandButton
							actionListener="#{contaBean.excluirAllContaActionListener}"
							ajaxSingle="true" value="excluir" reRender="tabContas"
							disabled="#{c.status}"> 
							<f:attribute name="contaRow" value="#{c}" />
						</a4j:commandButton>
					</rich:column>
					<rich:column>
						<a4j:commandButton
							actionListener="#{contaBean.pagarContaActionListener}"
							ajaxSingle="true" value="pagar" reRender="tabContas"
							disabled="#{c.status}">
							<f:attribute name="contaRow" value="#{c}" />
						</a4j:commandButton>
					</rich:column>
					<f:facet name="footer">
						<rich:datascroller for="tabContas" renderIfSinglePage="false" />
					</f:facet>
				</rich:dataTable>
			</h:form>
		</rich:panel>
	</ui:define>
</ui:composition>

</html>